<template>
  <div class="upload">
    <el-tag class="mx-1" size="large" @mousedown="mouseDown" closable>
      当前已选择图片: {{ fileList.length }}张</el-tag
    >
  </div>
  <el-upload
    action="http://127.0.0.1:9999/upload"
    list-type="picture-card"
    :auto-upload="status"
    :before-upload="beforeUpload"
    :on-error="onError"
    :on-change="onChangeFile"
    :file-list="fileList"
    :show-file-list="true"
    multiple
  >
    <!-- <template #trigger
      ><el-button slot="trigger" size="big" type="primary" plain
        >模板文件选择，已选择{{ fileList.length }}个</el-button
      ></template
    > -->
    <template #default>
      <!-- <el-icon><plus /></el-icon> -->
      添加多张图片
    </template>
    <template #file="{ file }">
      <div @onmousedown="mouseDown" class="img">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />

        <span class="el-upload-list__item-actions" style="opacity: 0.6">
          <span
            @click="handleChange(file)"
            class="el-upload-list__item-preview name"
            style="display: block"
            >{{ file.name }}</span
          >
          <!-- <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon> <zoom-in> </zoom-in></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleChange(file)"
          >
            <el-icon><delete /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><delete /></el-icon>
          </span> -->
        </span>
      </div>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" style="width: 200px; height: 200px" alt="" />
  </el-dialog>

  <!-- 修改图片名字组件 -->
  <el-button type="text" @click="changeDialogVisible = true"
    >click to open the Dialog</el-button
  >

  <el-dialog
    v-model="changeDialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span
      >当前图片名字:<span style="color: #f56c6c">{{ currentPicName }}</span
      >(格式无法修改)</span
    >
    <el-input />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="changeDialogVisible = false">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { Plus, ZoomIn, Download, Delete } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus/es/components/upload/src/upload.type";
import { useStore } from "@/store";
const store = useStore();

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const status = ref(false);
const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const fileList = ref([]);
const changeDialogVisible = ref(false); //修改图片名字对话框
const currentPicName = ref("出错了"); //当前图片名字
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const handleDownload = (file: UploadFile) => {
  console.log(file);
};

const beforeUpload = (file) => {
  console.log(123);

  console.log("file", file);
  return true;
};

const onError = (err) => {
  console.log("失败", err);
};

const change = () => {
  console.log("启动");
  status.value = true;
};

const onChangeFile = (file, list) => {
  console.log(file, list);
  fileList.value = list;
  // store
  // console.log("列表:", fileList);
};

//修改某张图片
const handleChange = (file) => {
  console.log("点击修改", file);
  changeDialogVisible.value = true;
  currentPicName.value = file?.name;
  fileList.value.unshift(file);
};

watch(fileList, (n, o) => {
  console.log("触发事件", n, o);
  store.commit("modulePicUpload/savePics", fileList.value);
  console.log(store.state);
});

//鼠标按下事件
const mouseDown = (e) => {
  console.log("鼠标按钮下", e);
};

const handleClose = () => {
  console.log("关闭");
};
</script>

<style lang="less">
.upload {
  .img {
    position: relative;
    .name {
      position: absolute;
      top: 0;
      left: 0;
      color: red;
    }
  }
}
</style>
